import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';

//引入根组件
import App from './App';
import reportWebVitals from './reportWebVitals';

//导入默认导出的store 和命名导出的persistor
import store, {persistor} from "./store/index"

import { PersistGate } from 'redux-persist/integration/react';
//导入路由 
import { BrowserRouter,HashRouter  } from 'react-router-dom'

  var context =React.createContext()
//渲染根组件
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
  //如果你在react中使用 PersistGate包裹你的根组件，会导致组件延迟渲染，因为PersistGate需要在每次刷新页面时，先从本地计算机找到存储的数据，并保存到redux中，供组件使用，所以他得确保拿到数据后才会加载你的组件渲染
  <BrowserRouter>
   <context.Provider store={store}>
   <PersistGate loading={<div>这里可以放一个loading动画</div>} persistor={persistor}>
   <App />
   </PersistGate>
   </context.Provider>
  
 
  </BrowserRouter>

  // {/* </React.StrictMode> */}
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
